<template>
  <div class="clearanceRateCon">
    <div ref="clearance" class="clearance">
      <div class="clearanceCon">
        <div class="clearanceConTit">
          <img src="../../../../static/img/btg1.png" />
          <span>申报数量</span>
        </div>
        <div class="clearanceConTxt">
          <span>{{formatNumberRgx(shenbao)}}</span>
          <span>万包</span>
        </div>
      </div>
      <div class="clearanceCon">
        <div class="clearanceConTit">
          <img src="../../../../static/img/btg2.png" />
          <span>通关数量</span>
        </div>
        <div class="clearanceConTxt">
          <span>{{formatNumberRgx(tongguan)}}</span>
          <span>万包</span>
        </div>
      </div>
      <div class="clearanceCon" @mouseenter.stop="clearanceRateEnter($event)" @mouseleave.stop="clearanceRateLeave($event)">
        <div class="clearanceConTit">
          <img src="../../../../static/img/btg3.png" />
          <span>均价/包</span>
        </div>
        <div class="clearanceConTxt">
          <span>{{formatNumberRgx(nowRATE)}}</span>
          <span>元</span>
        </div>
      </div>
      <div class="clearanceCon" @mouseenter.stop="clearanceRateEnter($event)" @mouseleave.stop="clearanceRateLeave($event)">
        <div class="clearanceConTit">
          <img src="../../../../static/img/btg4.png" />
          <span>税额/包</span>
        </div>
        <div class="clearanceConTxt">
          <span>{{formatNumberRgx(nowTAXES)}}</span>
          <span>元</span>
        </div>
      </div>

    </div>
    <div ref="clearanceRate" class="clearanceRate"></div>
    <div :class="['clearanceRateConTck',clearanceRateShow?'':'hide']">
      <div class="clearanceRateConTckTit">
        <span class="width20">年份</span>
        <span class="width40">单价/包</span>
        <span class="width40">税额/包</span>
      </div>
      <div class="clearanceRateConTckCon">
        <div class="clearanceRateConTckList" v-for="(item,i) in KeDanJiaList">
          <span class="width20">{{item.YEAR}}</span>
          <span class="width40">{{item.RATE}}</span>
          <span class="width40">{{item.TAXES}}</span>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'clearanceRate',
    components: {

    },
    data() {
      return {
        clearanceRateShow: false,
        shenbao: 0,
        tongguan: 0,
        nowRATE: 0, //均价
        nowTAXES: 0, //税额
        KeDanJiaList: []
      }
    },
    mounted() {
      this.getClearanceRateData();
      setInterval(this.getClearanceRateData, 5000);
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getClearanceRateData() {
        const clearanceRate = this.$refs.clearanceRate;
        let _this = this;
        var that = this;
        let shenbao = 0;
        let tongguan = 0;
        /*申报/通关*/
        this.$myHttp.post("getTongGuanSHenBaoInfo")
          .then(function(data0) {
              if (data0.status == "200") {
                _this.shenbao = parseInt((data0.data.shenbao.XIADAN + data0.data.tongguan.DANLIANG) / 10000).toFixed(0);
                _this.tongguan = parseInt(data0.data.tongguan.DANLIANG / 10000).toFixed(0);

                tongguan = data0.data.tongguan.DANLIANG / 10000;
                tongguan = tongguan.toFixed(0);
                shenbao = data0.data.shenbao.XIADAN / 1000 + parseInt(tongguan);
                shenbao = shenbao.toFixed(0);
                let temptgl = parseInt(100000 * tongguan / shenbao) / 1000; // 通关率=通关数量/申报数量
                let tgl = temptgl.toFixed(2);
                let Rand = Math.random().toFixed(2);
                tgl = (parseFloat(tgl) + parseFloat(Rand)).toFixed(2).toString();
                if (tgl >= 100) {
                  tgl = 99.99;
                }
                if (clearanceRate) {
                  const myChart = _this.$echarts.init(clearanceRate)
                  const option = {
                    title: {
                      text: '通关率',
                      left: 'center',
                      textStyle: {
                        color: "#fff",
                        fontWeight: "normal",
                        fontSize: that.commonFunction.fontSize(0.14),
                        lineHeight:that.commonFunction.fontSize(0.1),
                      },
                       subtext: "通关率=通关数量/申报数量", // 副标题文本
                      subtextStyle: {
                        color: '#fff',
                        fontSize: that.commonFunction.fontSize(0.12),
                         lineHeight:that.commonFunction.fontSize(0.1),
                        fontWeight: 'normal'
                        }, // 副标题样式
                      },
                      grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '1%',
                        containLabel: true
                      },
                      tooltip: {
                        formatter: '通关率 : {c}%'
                      },

                      series: [{
                        //类型
                        type: 'gauge',
                        //半径
                        radius: that.commonFunction.fontSize(0.5),

                        //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                        startAngle: 210,
                        //结束角度。
                        endAngle: -30,
                        center: ['50%', '70%'],
                        animationDuration: 2000, //动画时长
                        animationDelay: function(idx) {
                          return idx * 10 + 1000;
                        },
                        //仪表盘轴线相关配置。
                        axisLine: {
                          show: true,
                          // 属性lineStyle控制线条样式
                          lineStyle: {
                            width: that.commonFunction.fontSize(0.05),
                            // color: [[1, '#63869e']],
                            color: [
                              [1, 'red']
                            ]
                          }
                        },
                        //分隔线样式。
                        splitLine: {
                          show: true,
                        },
                        //刻度样式。
                        axisTick: {
                          show: true,
                        },
                        splitLine: {
                          show: true,
                          length: that.commonFunction.fontSize(0.1),
                        },
                        //刻度标签。
                        axisLabel: {
                          show: false,
                          fontWeight: 'bolder',
                          color: '#3fc7e1', //刻度数字颜色 隐藏
                          shadowColor: '#fff', //默认透明
                          shadowBlur: that.commonFunction.fontSize(0.08)
                        },
                        axisTick: {
                          length: that.commonFunction.fontSize(0.06),
                          lineStyle: {
                            shadowColor: '#3fc7e1',
                            shadowBlur: that.commonFunction.fontSize(1)
                          }
                        },

                        //仪表盘指针。
                        pointer: {
                          //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                          show: true,
                          //指针长度
                          length: '80%',
                          width: 3,
                        },
                        //仪表盘标题。
                        // title: {
                        //   show: true,
                        //   offsetCenter: [0, '-0%'], // x, y，单位px
                        //   textStyle: {
                        //     color: '#fff',
                        //     fontSize: that.commonFunction.fontSize(0.16)
                        //   }
                        // },
                        //仪表盘详情，用于显示数据。
                        detail: {
                          show: true,
                          offsetCenter: [0, '60%'],
                          formatter: '{value}%',
                          textStyle: {
                            fontSize: that.commonFunction.fontSize(0.12),
                            color: '#fff',
                          }
                        },
                        data: [{
                          value: 0,
                          // name: 'OEE'
                        }]
                      }]
                    };
                    var color = [
                      [80 / 100, '#1d82ff'],
                      [1, '#41ddeb']
                    ];
                    option.series[0].axisLine.lineStyle.color = color;
                    option.series[0].data[0].value = tgl;
                    myChart.setOption(option)
                    window.addEventListener("resize", function() {
                      myChart.resize()
                    })
                  }
                }
              })
            /*均价/税额*/
            this.$myHttp.post("getKeDanJia")
            .then(function(data0) {
              if (data0.status == "200") {
                let date = new Date();
                let nowYear = date.getFullYear();
                data0.data.hn_average.forEach((item, index) => {
                  if (item.YEAR == nowYear) {
                    _this.nowRATE = item.RATE;
                    _this.nowTAXES = item.TAXES;
                  }
                  _this.KeDanJiaList = data0.data.hn_average;

                })
              }

            })
          },
          clearanceRateEnter(e) {
            this.clearanceRateShow = true;
          },
          clearanceRateLeave(e) {
            this.clearanceRateShow = false;
          }

      }
    }
</script>

<style>
  .clearanceRateCon {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
  }

  .clearanceRateCon>div:nth-of-type(1) {
    width: 58%;
    height: 100%;
  }

  .clearanceRateCon>div:nth-of-type(2) {
    width: 38%;
    height: 100%;
  }

  .clearance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .clearanceCon {
    width: 2.5rem;
    height: .3rem;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 0 .05rem;
    background: url(../../../../static/img/bg2.png);
    background-size: 100% 100%;
    margin-bottom: .05rem;
  }

  .clearanceConTit {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .clearanceConTit>img {
    width: .18rem;
    height: .18rem;

  }

  .clearanceConTit>span {
    width: 80%;
    font-size: .12rem;
    color: #fff;
    margin-left: .05rem;
  }

  .clearanceConTxt {
    width: 55%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: .12rem;
    justify-content: flex-end;
  }

  .clearanceConTxt>span:nth-of-type(1) {
    width: 70%;
    font-size: .12rem;
    color: #20f2ff;
    text-align: right;
  }

  .clearanceConTxt>span:nth-of-type(2) {
    font-size: .12rem;
  }


  .clearanceRateConTck {
    width: 95%;
    height: 90%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;
    background: rgba(2, 6, 86, 0.8);
    padding: .05rem;
    box-sizing: border-box;
    pointer-events: none;
  }

  .clearanceRateConTckTit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2246a6;
    height: .3rem;
  }

  .clearanceRateConTckTit>span {
    height: .3rem;
    line-height: .3rem;
    text-align: center;
    color: #fdd000;
    font-size: .14rem;
  }

  .clearanceRateConTckCon {
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: red; */
  }

  .width20 {
    width: 20%;
  }

  .width40 {
    width: 40%;
  }

  .clearanceRateConTckList {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .22rem;
    font-size: .12rem;
    width: 100%;
  }

  .clearanceRateConTckList>div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .clearanceRateConTckList>div>span {
    border-radius: .03rem;
    width: .16rem;
    height: .16rem;
    color: #fff;
    background: #2246a6;
    line-height: .16rem;
    text-align: center;
    font-size: .12rem;
  }

  .clearanceRateConTckList:nth-child(1)>div>span {
    background: #ed174f;
  }

  .clearanceRateConTckList:nth-child(2)>div>span {
    background: #ff4200;
  }

  .clearanceRateConTckList:nth-child(3)>div>span {
    background: #fdd000;
  }

  .clearanceRateConTckList>span {
    height: .3rem;
    line-height: .3rem;
    text-align: center;
    color: #fff;
    font-size: .11rem;
  }

  .hide {
    display: none;
  }
</style>
